<template>
  <div class="app-container">
    <h1>东软云医院HIS系统</h1>
    <h2>结算类别管理</h2><hr/>
    <div class="main">
      <div class="controlDiv">
        <el-row class="demo-autocomplete">
          <el-input v-model="input" placeholder="请输入结算类别编码或名称"></el-input>
          <el-button type="primary" class="firstButton" @click="selectInfo()">查询结算类别</el-button>
          <el-button type="primary" @click="addSettleCategory()">新增结算类别</el-button>
        </el-row>
      </div>
      <div class="listDiv">
        <el-table :data="msg" ref="a" border>
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="类别编码" prop="settleCode"></el-table-column>
          <el-table-column label="类别名称" prop="settleName"></el-table-column>
          <el-table-column label="显示顺序号" prop="sequenceNo"></el-table-column>
          <el-table-column label="使用状态" prop="delMark"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--编辑按钮-->
              <div class="dealButton">
                <el-button type="primary" icon="el-icon-edit" :modal="scope" size="small" @click="modifySettleCategory(scope.$index, scope.row)"
                  circle></el-button>
              </div>
              <!--删除按钮-->
              <div class="dealButton">
                <el-popconfirm confirmButtonText='确定' @onConfirm="deleSettle(scope.$index, scope.row)" cancelButtonText='取消'
                  icon="el-icon-info" iconColor="red" title="真要删呐">
                  <el-button type="danger" slot="reference" icon="el-icon-delete" size="small" circle></el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- Dialog 新增结算类别-->
    <el-dialog title="新增结算类别" :visible.sync="dialogFormVisible_add" :close-on-click-modal="false" @closed="selectInfo()">
      <el-form :model="addSettle">
        <el-form-item label="类别编码: " :label-width="LabelWidth">
          <el-input v-model="addSettle.addSettleCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别名称: " :label-width="LabelWidth">
          <el-input v-model="addSettle.addSettleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序号: " :label-width="LabelWidth">
          <el-input v-model="addSettle.addSequenceNo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="doAddSettleCategory()">保 存</el-button>
      </div>
    </el-dialog>
    <!-- Dialog 编辑-->
    <el-dialog title="修改结算类别" :visible.sync="dialogFormVisible_modify" :close-on-click-modal="false" @closed="selectInfo()">
      <el-form :model="updateSettle">
        <el-form-item label="类别编码: " :label-width="LabelWidth">
          <el-input v-model="updateSettle.settleCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别名称: " :label-width="LabelWidth">
          <el-input v-model="updateSettle.settleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序号: " :label-width="LabelWidth">
          <el-input v-model="updateSettle.sequenceNo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_modify = false">取 消</el-button>
        <el-button type="primary" @click="doModifySettleCategory()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  export default {
    name:'SettleCategory',
    data() {
      return {
        msg: [],
        dialogFormVisible_add: false,
        addSettle: {
          addSettleCode: '',
          addSettleName: '',
          addSequenceNo: ''
        },
        dialogFormVisible_modify: false,
        updateSettle: {
          settleCode: '',
          settleName: '',
          sequenceNo: ''
        },
      }
    },
    methods: {
      selectInfo() {
        let _this = this;
        alert("您好，欢迎进行测试！")
        this.$axios.get("/neuhis/settle/queryAllSettleCategory")
        .then(response =>{
          _this.msg = response.data;
        });
      },
      addSettleCategory() {
        this.addSettle.addSettleCode = '';
        this.addSettle.addSettleName = '';
        this.addSettle.addSequenceNo = '';
        this.dialogFormVisible_add = true;
      },
      doAddSettleCategory() {
        this.$axios.post("/neuhis/settle/add", {
           settleCode: this.addSettle.addSettleCode,
           settleName: this.addSettle.addSettleName,
           sequenceNo: this.addSettle.addSequenceNo
        })
        .then(response => {
          alert(response.data);
           if (response.data == "ok") {
              this.dialogFormVisible_add = false;
           }
         })
      },
      modifySettleCategory(index, row) {
        this.updateSettle.id = this.msg[index].id;
        this.updateSettle.settleCode = this.msg[index].settleCode;
        this.updateSettle.settleName = this.msg[index].settleName;
        this.updateSettle.sequenceNo = this.msg[index].sequenceNo;
        this.dialogFormVisible_modify = true;
      },
      doModifySettleCategory() {
        this.$axios.post("", {
          id: this.updateSettle.id,
          settleCode: this.updateSettle.settleCode,
          settleName: this.updateSettle.settleName,
          sequenceNo: this.updateSettle.sequenceNo
        })
        .then(response => {
          if (response.data == "ok") {
            this.dialogFormVisible_modify = false;
          }
         })
      },
      deleSettle(index, row) {
        this.$axios.get("/", {
            id: this.msg[index].id
          })
          .then(response => {
            this.selectInfo();
          })
      }
    }
  }

</script>

<style>
  .main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }

  .main .controlDiv {
    width: 90%;
    margin-bottom: 10px;
  }

  .main .listDiv {
    width: 90%;
  }

  .firstButton {
    margin-left: 10px;
  }

  .main .pageControlDiv {
    margin-top: 30px;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }

  .main .delBatchDiv {
    margin-top: 10px;
    width: 12%;
    text-align: right;
  }

  .dealButton {
    display: inline;
    margin-left: 8px;
  }
</style>
